<template>
	<view class="auto-page">
		<view class="f-1 f-column">
			<toast ref="toast"></toast>
			<view class="header">
				<view class="f-row" style="height: 68rpx;line-height: 68rpx;border-bottom: 2rpx solid #e8e8e8">
					<view class="header-title">商品统计</view>
					<view class="header-title-des center">在售商品</view>
					<view class="center"
						style="min-width: 70rpx;color: #1a66ff;padding-right: 30rpx;font-weight: bold;">
						{{goodsStatisticsData ? goodsStatisticsData.onsale : '0'}}
					</view>
				</view>
				<view class="orderstatus-list f-row">
					<view class="orderstatus-item" v-for="(item , index) in goodsTypeList" :key="index"
						@click="pickFun(item.type , index)">
						<view class="orderstatus-item-title">{{item.name}}</view>
						<view class="unread-dot" v-show="item.number > 0">
							<view style="color: #FFF;font-size: 20rpx;">
								{{item.number}}
							</view>
						</view>
					</view>
					<view class="select-line transition-point-three" :style="goodsStatusIndex == 0 ? 'transform: translateX(12.5vw)' :
													  goodsStatusIndex == 1 ? 'transform: translateX(37.5vw)' :
													  goodsStatusIndex == 2 ? 'transform: translateX(62.5vw)' :
													  goodsStatusIndex == 3 ? 'transform: translateX(87.5vw)' : 'transform: translateX(12.5vw)'"></view>
				</view>
				<!-- 添加商品 -->
			</view>
			<view class="add-goods" @click="$navigate('goods-edit', 'page' , { action:'create' })">
				<image src="../../static/icons/addgoods-icon.png" mode="aspectFill"></image>
				<span>发布新商品</span>
			</view>
			<view class="auto-container" style="top: 148rpx;height: calc(100vh - 148rpx);padding-top: 30rpx;">
				<scroll-view scroll-y="true" scroll-x="false" style="height: calc(100vh - 148rpx);"
					refresher-enabled="true" @refresherrefresh="refresherrefresh" :refresher-triggered="refreshing"
					@scrolltolower="scrolltolower" refresher-default-style="white" scroll-anchoring="true"
					refresher-threshold="250">
					<view class="goods-item f-column bg-white" v-for="(item, index) in goodsList">
						<view class="f-row goods-item-content">
							<view class="goods-item-pic">
								<image mode="aspectFill" :src="item.image"></image>
							</view>
							<view class="goods-item-detail">
								<view class="goods-detail-name double-text">
									{{item.store_name}}
								</view>
								<!-- 商品标签 -->
								<view class="f-1"></view>
								<!-- 								<view class="goods-detail-label">
									<scroll-view style="width: 300rpx;height: 46rpx;white-space: nowrap" :scroll-x="true" :scroll-y="false">
										<view class="goods-detail-label-item">
											标签
										</view>
										<view class="goods-detail-label-item">
											标签
										</view>
										<view class="goods-detail-label-item">
											标签
										</view>
										<view class="goods-detail-label-item">
											标签
										</view>
										<view class="goods-detail-label-item">
											标签
										</view>
										<view class="goods-detail-label-item">
											标签
										</view>
										<view class="goods-detail-label-item">
											标签
										</view>
									</scroll-view>
								</view> -->
								<view class="goods-detail-price-sale f-row">
									<view class="goods-detail-price price single-text">
										{{item.price}}
									</view>
									<view class="goods-detail-sale">
										已售: {{item.sales}}
									</view>
								</view>
								<view class="goods-detial-stock-other">
									<view class="goods-stock">库存：{{item.stock}}</view>
								</view>
							</view>
						</view>
						<view class="goods-item-operation">
							<view class="goods-switch transition-one"
								:style="item.is_show == 1 ? 'background-color: #007AFF' : 'background-color: #d8d8d8'"
								@click.stop="goodsSwitch(item.product_id ,item.is_show)">
								<view class="goods-switch-circle transition-point-three"
									:style="item.is_show == 1 ? 'margin-left:72rpx' : 'margin-left:2rpx;border:2rpx solid #d8d8d8;box-shadow:1px 0 1px 1px rgba(0, 0, 0, .1);box-sizing: border-box'">
								</view>
								<view class="goods-switch-text"
									:style="item.is_show == 1 ? 'left:20rpx;color:#FFFFFF' : 'right:20rpx;color:#FFFFFF'">
									{{item.is_show == 1 ? '上架' : '下架'}}
								</view>
							</view>
							<view class="edit-button f-row f-center">
								<image mode="aspectFill" src="../../static/icons/edit.png"></image>
								<view class="edit-button-text"
									@click="$navigate('goods-edit', 'page' ,{ id:item.product_id , action:'update' })">
									编辑</view>
							</view>
						</view>
					</view>
					<view class="f-column" style="width: 100vw;height: calc(100vh - 148rpx);" v-if="statusObject.status == -1 || statusObject.status == 0 || statusObject.status == 1">
						<loading-more :statusObject="statusObject"></loading-more>
					</view>
					<block v-else>
						<loading-more :statusObject="statusObject"></loading-more>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	import loading from '../../components/loading.vue';
	import loadingMore from '../../components/loading-more.vue';
	import toast from '../../components/toast.vue';
	import STORE from '../../api/store.js'
	import {
		showToast
	} from '../../lib/utils.js'
	export default {
		components: {
			loading,
			loadingMore,
			toast
		},
		data() {
			return {
				goodsStatusIndex: 0,
				goodsTypeList: [{
						name: "已上架",
						type: 1,
						number: 0
					},
					{
						name: "已售罄",
						type: 3,
						number: 0
					},
					{
						name: "仓库中",
						type: 4,
						number: 0
					},
					{
						name: "警戒库存",
						type: 2,
						number: 0
					}
				],
				goodsList: [],
				statusObject: {
					status: 0
				},
				isLoading: false,
				limit: 5,
				page: 1,
				categorySelect: false,
				statusObject: {
					status: 0
				},
				goodsStatisticsData: false,
				refreshing: false,
			}
		},
		onLoad() {
			_this = this;
		},
		onShow() {
			_this.productLst(_this.goodsTypeList[_this.goodsStatusIndex].type);
			_this.goodsStatistics();
		},
		methods: {
			goodsStatistics() {
				STORE.goodsStatistics().then((res) => {
					console.log(res);
					_this.goodsTypeList[0].number = res.onsale;
					_this.goodsTypeList[1].number = res.sellout;
					_this.goodsTypeList[3].number = res.alertstock;
					_this.goodsTypeList[2].number = res.storehouse;
				}).catch((err) => {
					console.log(err);
					showToast('商品统计数据获取失败');
				});
			},
			pickFun(type, index) {
				_this.goodsStatusIndex = index;
				_this.goodsList = [];
				_this.page = 1;
				_this.statusObject = {
					status: 0
				};
				_this.productLst(type);
			},
			productLst(type,isRefresh) {
				if (_this.statusObject.status == 2 || _this.isLoading) {
					return
				}
				_this.isLoading = true;
				let result;
				STORE.productLst({
					page: _this.page,
					type: type || 1,
					limit: _this.limit
				}).then((res) => {
					console.log(res)
					result = JSON.parse(JSON.stringify(res));
					_this.goodsList = _this.goodsList.concat(res.list);
					if (res.count == 0) {
						_this.statusObject = {
							status: 1
						};
					} else if ((_this.goodsList.length == res.count && res.count !== 0) || res.list.length == 0) {
						_this.statusObject = {
							status: 2
						};
						_this.page += 1;
					} else {
						_this.statusObject = {
							status: 3
						};
						_this.page += 1;
					}
					if(isRefresh) _this.refreshing = false;
				}).catch((err) => {
					_this.statusObject = {
						status: -1
					};
					showToast(err.message);
					if(isRefresh) _this.refreshing = false;
				}).then(() => {
					_this.isLoading = false;
				});
				
			},
			goodsSwitch(id, status) {
				uni.showLoading({
					title: status == 1 ? '下架中...' : '上架中'
				});
				STORE.productStatus({
					id: id,
					status: status == 1 ? 0 : 1,
				}).then((res) => {
					uni.hideLoading();
					console.log(res);
					_this.statusObject = {
						status: 0
					};
					_this.page = 1;
					_this.goodsList = [];
					_this.$refs.toast.showToast(status == 1 ? '商品已下架' : '商品已上架');
					_this.productLst(_this.goodsTypeList[_this.goodsStatusIndex].type);
				}).catch((err) => {
					uni.hideLoading();
					showToast(err.message);
				});
			},
			refresherrefresh() {
				_this.page = 1;
				_this.goodsList = [];
				_this.refreshing = true;
				_this.productLst(_this.goodsTypeList[_this.goodsStatusIndex].type,true);
				
			},
			scrolltolower() {
				_this.productLst(_this.goodsStatusIndex == 0 ? 1 :
					_this.goodsStatusIndex == 1 ? 3 :
					_this.goodsStatusIndex == 2 ? 4 :
					_this.goodsStatusIndex == 3 ? 2 : 1);
			}
		}
	}
</script>

<style>
	.unread-dot {
		height: 30rpx;
		width: 30rpx;
		border-radius: 15rpx;
		background-color: #1a66ff;
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		border-bottom: 2rpx solid #e8e8e8;
		background-color: #FFFFFF;
		z-index: 9999;
	}

	.price {
		font-size: 30rpx;
	}

	.goods-item {
		border: 2rpx solid #999999;
		padding: 15rpx 0 0 0;
		margin: 30rpx 15rpx 0 15rpx;
		border-radius: 20rpx;
	}

	.goods-item:first-child {
		margin-top: 60rpx;
	}

	.goods-item-content {
		overflow: hidden;
		padding: 0 15rpx;
	}

	.select image {
		width: 40rpx;
		height: 40rpx;
	}

	.goods-item-pic,
	.goods-item-pic image {
		height: 200rpx;
		width: 200rpx;
		border-radius: 16rpx;
	}

	.goods-item-detail {
		flex: 1;
		padding: 0 10rpx;
		display: flex;
		flex-direction: column;
	}

	.goods-detail-name {
		padding-top: 15rpx;
		line-height: 40rpx;
		font-size: 26rpx;
	}

	.goods-detail-label {
		margin-top: 5rpx;
		height: 46rpx;
		width: 100%;
	}

	.goods-detail-label-item {
		display: inline-block;
		height: 30rpx;
		font-size: 22rpx;
		text-align: center;
		line-height: 30rpx;
		border: 2rpx solid #d8d8d8;
		margin: 0 5rpx;
		border-radius: 10rpx;
		padding: 0 10rpx;
	}

	.goods-detail-price-sale {
		height: 50rpx;
		width: 100%;
		overflow: hidden;
		align-items: flex-end;
	}

	.goods-detail-price {
		height: fit-content;
		max-height: 200rpx;
	}

	.goods-detail-sale,
	.goods-stock {
		color: #999999;
		font-size: 22rpx;
		flex: 1;
	}

	.goods-detail-sale {
		text-align: right;
	}

	.goods-detial-stock-other {
		height: 40rpx;
	}

	.goods-item-operation {
		padding: 0 30rpx;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}

	.goods-switch {
		width: 120rpx;
		height: 50rpx;
		border-radius: 27rpx;
		position: relative;
		align-items: center;
		display: flex;
		flex-direction: row;
	}

	.goods-switch-circle {
		height: 46rpx;
		width: 46rpx;
		border-radius: 50%;
		background-color: #FFFFFF;
	}

	.goods-switch-text {
		color: #FFFFFF;
		font-size: 22rpx;
		line-height: 50rpx;
		position: absolute;
	}

	.header-title::before {
		content: "";
		width: 2rpx;
		border-left: 10rpx solid #1a66ff;
		height: 58rpx;
		margin: 5rpx 15rpx;
	}

	.header-title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.header-title-des {
		font-size: 30rpx;
		margin-left: 15rpx;
		flex: 1;
	}

	.header-title-des::after {
		content: "（款）";
		color: #999999;
	}

	.goodsType-item {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 26rpx;
		color: #333333;
	}

	.add-goods {
		position: fixed;
		top: 153rpx;
		right: 30rpx;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.add-goods image {
		height: 50rpx;
		width: 50rpx;
	}

	.add-goods span {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.edit-button {
		height: 50rpx;
		margin-left: 40rpx;
	}

	.edit-button image {
		height: 50rpx;
		width: 50rpx;
	}

	.edit-button-text {
		line-height: 50rpx;
		font-size: 26rpx;
	}

	.select-line {
		position: absolute;
		bottom: 0;
		height: 4rpx;
		width: 80rpx;
		background-color: #007AFF;
		margin-left: -40rpx;
	}

	.orderstatus-list {
		position: relative;
		height: 78rpx;
	}

	.orderstatus-item {
		height: 78rpx;
		flex: 1;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.orderstatus-item-title {
		font-size: 24rpx;
		height: 78rpx;
		line-height: 78rpx;
	}
</style>
